<template>
	<view class="container">
		<view class="completeImage">
			<image src="/static/complete.png"></image>
		</view>
		<view class="status">
			<text>预约成功</text>
		</view>
		
		<view class="orderNumber">
			<text>订单编号：{{orderId}}</text>
		</view>
		<view class="buttons">
			<button @click="goHome">返回首页</button>
			<button @click="viewDetails">预约详情</button>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            orderId: '',
	           
	        };
	    },
	    onLoad(options) {
			 console.log(options);
	        // 从页面跳转的URL参数中获取订单id和订单编号
	        this.orderId = options.orderId;
	       
	        
	        // 可以在这里展示订单信息，或者进一步使用orderId去后端查询订单详情
	    },
	    methods: {
	        goHome() {
	            // 返回首页
	            uni.switchTab({
	                url: '/pages/index/index'
	            });
	        },
	        viewDetails() {
	            // 跳转到订单详情页面，并传递订单id
	            uni.navigateTo({
	                url: `/pages/carRepair/bookingDetail/bookingDetail?orderId=${this.orderId}`
	            });
	        }
	    }
	}

</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		padding-top: 100px;
	}

	.completeImage {
		margin-bottom: 15px;
	}
	.completeImage image{
		width: 60px;
		height: 60px;
	}

	.status {
		width: 80px;
		height: 29px;
		font-size: 19px;
		font-weight: bold;
		margin-bottom: 10px;
		text-align: center;
		margin-bottom: 20px;
	}

	.amount {
		width: 121px;
		height: 54px;
		font-size: 37px;
		color: #101010;
		text-align: center;
	}

	.orderNumber {
		margin-bottom: 20px;
		font-size: 13px;
		color: #101010;
		width: 215px;
		height: 20px;
		text-align: center;
font-weight: 700;
	}

	.buttons button {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10px;
		padding: 10px 20px;
		background-color: #1D6FFF;
		color: white;
		border-radius: 5px;
		font-size: 16px;
		width: 242px;
		height: 40px;
		margin-bottom: 20px;
	}

	.buttons button:nth-child(2) {
		background-color: #CECECE;
	}
</style>